T├®cnico de Gest├úo e Programa├º├úo de Sistemas Inform├íticos

Prova de Aptidão Profissional

Plataforma Digital - InfoConnect

Interface gráfica do usuário

O conte├║do gerado por IA pode estar incorreto.

Cantanhede

Douglas Anjos, 12┬║ TGPSI, N┬║ 3

2023 / 2026

Escola T├®cnico Profissional de Cantanhede

T├®cnico de Gest├úo e Programa├º├úo de Sistemas Inform├íticos

Prova de Aptidão Profissional: Plataforma Digital - InfoConnect

Equipa de Acompanhamento: Michael Teixeira, Elisabete Cavaleiro e Teresa Fernandes

Cantanhede

2025/2026

PARA O TRABALHO QUE GOSTAMOS LEVANTAMO-NOS CEDO E FAZEMO-LO COM ALEGRIA.

William Shakespeare

Agradecimentos

Índice Geral

Índice de Figuras

Índice de Tabelas

Introdução (Português)

Introduction (Inglês)

Planeamento

Fundamentação

Escolhi o tema ÔÇ£Plataforma Digital ÔÇô InfoConnectÔÇØ porque considero que a tecnologia pode ter um papel muito importante na melhoria da comunica├º├úo e da gest├úo de servi├ºos dentro das empresas de inform├ítica. Durante o curso T├®cnico de Gest├úo e Programa├º├úo de Sistemas Inform├íticos, tive a oportunidade de realizar v├írios projetos semelhantes em sala de aula, o que despertou o meu interesse por desenvolver algo mais completo e funcional.

Percebi que, em muitas empresas, os processos de atendimento ao cliente ainda s├úo feitos de forma manual, atrav├®s de chamadas telef├│nicas, mensagens ou anota├º├Áes em papel. Esse m├®todo pode causar atrasos, falhas na comunica├º├úo e perda de informa├º├Áes importantes. Com base nisso, decidi criar uma plataforma digital que permita automatizar e centralizar estes processos, tornando o atendimento mais r├ípido, transparente e eficiente, tanto para o cliente como para a empresa.

Objetivos

Gerais

Específicos

Terminar o Curso

  • Ter boa nota na PAP;
  • Terminar o curso com uma boa m├®dia.

Desenvolvimento da PAP

  • Aumentar os meus conhecimentos em Programa├º├úo;
  • Melhorar as minhas compet├¬ncias de concretiza├º├úo de projetos;
  • Aplicar tecnologias web modernas (React, Node.js, MySQL).
  • Aplicar os conhecimentos adquiridos ao longo dos tr├¬s anos do curso.
  • Explorar novas tecnologias utilizadas para o desenvolvimento da PAP.
  • Colocar o site online para que seja vis├¡vel por muitos utilizadores.
  • Desenvolver compet├¬ncias na ├írea de desenvolvimento de projetos de software.

Recursos

Hardware

Computador Portátil (Acer nitro ANV15-51)

- 13th Gen Intel(R) Core(TM) i5-13420H (2.10 GHz)

- NVIDIA GeForce RTX 4050 Laptop GPU

- Ram 16Gb

- Disco SSD 512 Gb

- Windows 11 64 bits

Software

Visual Studio Code

- Sistema Operativo: Windows 8, 10 ou 11 / macOS / Linux

- Processador: 1.6 GHz ou superior

- Mem├│ria RAM: 2 GB (recomendado 4 GB)

- Espaço em disco: 500 MB livres

- Resolução mínima: 1024 x 768

Node.js

- Sistema Operativo: Windows 8.1, 10 ou 11 / macOS / Linux

- Processador: 1.4 GHz ou superior

- Mem├│ria RAM: 2 GB (recomendado 4 GB)

- Espaço em disco: 200 MB para instalação

- Ligação à Internet: Necessária para instalação de pacotes (npm)

XAMPP (para servidor Apache e MySQL)

- Sistema Operativo: Windows 7, 8, 10 ou 11 / Linux / macOS

- Processador: Intel Pentium 4 ou superior

- Mem├│ria RAM: 2 GB (recomendado 4 GB)

- Espaço em disco: 2 GB disponíveis

- Resolução mínima: 1024 x 768

GitHub

- Um browser com acesso à Internet

Navegadores (OperaGX)

- Sistema Operativo: Windows 10 ou superior / macOS

- Processador: Intel Pentium 4 ou superior

- Mem├│ria RAM: 2 GB (recomendado 4 GB)

- Espaço em disco: 400 MB livres

- Resolução mínima: 1280 x 720

Metodologia

A metodologia será baseada em cascata com retorno. Esse modelo segue uma sequência de etapas bem definidas análise, desenho, implementação, testes e manutenção, mas com a possibilidade de voltar a fases anteriores sempre que forem detetados erros ou necessidades de melhoria. A escolha desta metodologia deve-se ao facto de proporcionar organização e clareza nas etapas, permitindo ao mesmo tempo ajustes contínuos ao longo do desenvolvimento. Assim, o projeto pode evoluir de forma controlada, garantindo a qualidade final da aplicação.

As principais etapas são:

Diagrama

O conte├║do gerado por IA pode estar incorreto.

Atividades

A Prova de Aptid├úo Profissional ir├í ser desenvolvida em tr├¬s fases. Cada fase ├® constitu├¡da por v├írias atividades. A primeira fase, a Fase de Defini├º├úo tem como principais atividades: pesquisa bibliogr├ífica, an├ílise do sistema, an├ílise dos requisitos e planeamento do projeto. A segunda fase, a Fase de Desenvolvimento ├® constitu├¡da pelas seguintes atividades, desenho, codifica├º├úo e testes. A terceira e ├║ltima fase, a Fase de Manuten├º├úo ├® onde encontramos as atividades de corre├º├úo, adapta├º├úo e evolu├º├úo.

Fase de Definição

Ôû║ Pesquisa Bibliogr├ífica ÔÇô etapa inicial do trabalho com o objetivo de reunir todas as informa├º├Áes necess├írias para o desenvolvimento do projeto.

Ôû║ An├ílise do Sistema ÔÇô atividade onde se realizou o levantamento de todas as funcionalidades do projeto e a forma como elas v├úo funcionar. Nesta atividade foi tamb├®m realizada a escolha das tecnologias para a realiza├º├úo do mesmo.

Ôû║ An├ílise dos Requisitos ÔÇô nesta atividade foi necess├írio fazer a verifica├º├úo dos requisitos m├¡nimos do Software necess├írio para implementa├º├úo do projeto.

Ôû║ Planeamento do Projeto ÔÇô com esta atividade foi desenvolvido o cronograma em que se estabelece as balizas temporais para cada uma das fases do projeto.

Fase de Desenvolvimento

Ôû║ Desenho ÔÇô nesta atividade faz-se o levantamento dos dados necess├írios para cria├º├úo da Base de Dados utilizada no projeto, implementando o Diagrama Entidade Relacionamento e o Modelo de Dados. Faz-se ainda a estrutura├º├úo da navega├º├úo do website e do backoffice.

Ôû║ Codifica├º├úo ÔÇô atividade em que toda a parte de codifica├º├úo ├® realizada.

Ôû║ Testes ÔÇô ao longo desta atividade realiza-se os testes ├ás funcionalidades implementadas por forma a garantir que nesta fase as mesmas est├úo a funcionar de acordo com o que foi planeado.

Fase de Manutenção

Ôû║ Corre├º├úo ÔÇô ├® nesta atividade em que irei realizar corre├º├Áes ao projeto. Estas corre├º├Áes tanto podem ser ├á interface gr├ífica ou ao c├│digo realizado at├® ao momento. Se for necess├írio tamb├®m se poder├í fazer altera├º├Áes estruturais ├á base de dados.

Ôû║ Adapta├º├úo ÔÇô depois de executado todos os testes e corre├º├Áes, ├® nesta atividade que v├úo ser realizadas adapta├º├Áes ao projeto. Estas adapta├º├Áes podem ser ao n├¡vel da interface gr├ífica ou ao n├¡vel da otimiza├º├úo de c├│digo. Estas adapta├º├Áes surgem da necessidade do projeto ser testado por outras pessoas.

Ôû║ Evolu├º├úo ÔÇô depois de ter os objetivos iniciais conclu├¡dos, ├® nesta fase, havendo tempo que irei tentar implementar novas funcionalidades que foram surgindo ao longo do desenvolvimento do projeto e que inicialmente n├úo estavam previstas.

Cronograma

Figura 1: Cronograma

Instalação e Preparação do Ambiente de Desenvolvimento

Nesta fase foram instaladas e configuradas todas as ferramentas necess├írias para o desenvolvimento da plataforma InfoConnect, tanto ao n├¡vel do Front-End como do Back-End. Cada ferramenta desempenha um papel fundamental ao longo do projeto, desde a escrita do c├│digo at├® ├á gest├úo da base de dados e execu├º├úo do servidor. As imagens inclu├¡das ao longo desta sec├º├úo ilustram cada etapa do processo de instala├º├úo.

Instalação do Visual Studio Code e Antigravity

O primeiro passo do desenvolvimento da plataforma InfoConnect foi a instalação dos editores de código Visual Studio Code (VS Code) e Antigravity, que foram as ferramentas escolhidas para programar tanto o Front-End como o Back-End do projeto.

Figura 2-Página oficial do Visual Studio Code. Para fazer o download cliquei em download for Windows.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 3-Ecrã do instalador apresentado para aceitar os termos de licença do Visual Studio Code. Aceitei os termos e cliquei em Avançar.

Interface gráfica do usuário, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 4-Etapa de configuração onde são selecionadas tarefas adicionais, como criar atalhos e adicionar o VS Code ao PATH. Depois vamos em Avançar.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 5-Resumo final das configura├º├Áes. O instalador est├í preparado para iniciar a instala├º├úo do Visual Studio Code.

Texto

O conte├║do gerado por IA pode estar incorreto.

Figura 6-Instalação finalizada com sucesso. O Visual Studio Code está pronto a ser utilizado.

Tela de computador com texto preto sobre fundo branco

O conte├║do gerado por IA pode estar incorreto.

Figura 7-A imagem mostra a página inicial oficial do Antigravity. Para fazer o download cliquei em download for Windows.

Interface gráfica do usuário, Aplicativo, Teams

O conte├║do gerado por IA pode estar incorreto.

Figura 8-Aqui ├® exibida a sec├º├úo de download do Antigravity. Foi selecionada a vers├úo compat├¡vel com Windows. X64 de acordo com o PC.

Interface gráfica do usuário, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 9-Esta imagem apresenta o ecrã de aceitação dos termos de licença. Aceitei os termos e cliquei em Avançar.

Interface gráfica do usuário, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 10-O instalador permite configurar op├º├Áes adicionais, como a cria├º├úo de atalhos no menu iniciar.

Interface gráfica do usuário, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 11-A imagem mostra o ecrã que confirma a conclusão da instalação.

Tela de celular com aplicativo aberto

O conte├║do gerado por IA pode estar incorreto.

Figura 12-Aqui vemos o Antigravity já aberto no ambiente de trabalho.

Instalação do Node.js

De seguida foi instalado o Node.js, essencial para a criação do servidor Back-End e para a utilização do gestor de pacotes npm. Durante o processo, ilustrado na imagem incluída no documento, foram aceites os termos de licença e escolhidos os componentes necessários, como o runtime do Node e o npm.

Tela de celular com fundo preto

O conte├║do gerado por IA pode estar incorreto.

Figura 13-Página oficial do Node.js. Para fazer o download cliquei em Get Node.js

Tela de computador com texto preto sobre fundo branco

O conte├║do gerado por IA pode estar incorreto.

Figura 14-Ecrã download foi selecionada a versão LTS (Long Term Support), recomendada para ambientes de produção e estabilidade.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 15-Início do assistente de instalação do Node.js.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 16-Apresentação dos termos de licença. Aceitei os termos e cliquei em Next.

Interface gráfica do usuário, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 17-Seleção da localização onde o Node.js será instalado no sistema.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 18-Seleção dos componentes essenciais: Node.js runtime, npm (Node Package Manager) e a opção para adicionar ao PATH.

Interface gráfica do usuário, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 19-Opção para instalar ferramentas adicionais (Python e Visual Studio Build Tools) para compilar módulos nativos.

Interface gráfica do usuário, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 20-Resumo das configura├º├Áes antes de iniciar a instala├º├úo do Node.js.

Texto

O conte├║do gerado por IA pode estar incorreto.

Figura 21-Linha de comandos responsável pela instalação de ferramentas necessárias para pacotes npm.

O Node.js permitiu posteriormente configurar o servidor Express, instalar dependências e executar scripts fundamentais para o funcionamento do projeto InfoConnect.

Instalação do XAMPP

Posteriormente, procedeu-se ├á instala├º├úo do XAMPP, uma ferramenta que re├║ne o servidor Apache, o MySQL e o phpMyAdmin ÔÇö elementos indispens├íveis para a gest├úo da base de dados do projeto.

Figura 22-P├ígina oficial do XAMPP onde ├® feito o download do instalador. Download Xampp para Windows.Interface gr├ífica do usu├írio, Texto, Aplicativo, Email

O conte├║do gerado por IA pode estar incorreto.

Figura 23-Ecrã de seleção dos componentes do XAMPP. Deixei padrão e cliquei em Next.

A imagem referente à instalação do XAMPP demonstra o processo de seleção dos módulos essenciais: Apache e MySQL. Estes são os serviços necessários para alojar a base de dados e permitir a comunicação entre o Back-End e o sistema de gestão de dados.

Inicialização do XAMPP

Interface gráfica do usuário

O conte├║do gerado por IA pode estar incorreto.

Figura 24-Painel de Controlo do XAMPP (vers├úo 3.3.0) com os servi├ºos Apache e MySQL . Quando est├úo ativos, permitem aceder ao servidor local e gerir a base de dados atrav├®s do phpMyAdmin.

Após a instalação, foi aberto o Painel de Controlo do XAMPP, como demonstrado na imagem.

Os serviços Apache e MySQL foram iniciados, permitindo:

o funcionamento local do servidor,

o acesso ao phpMyAdmin,

a criação e gestão da base de dados utilizada na plataforma InfoConnect.

Este passo ├® fundamental, pois sem estes servi├ºos ativos o Back-End n├úo conseguiria comunicar com a base de dados MySQL.

Acesso ao phpMyAdmin

Criei a Base de dados bd_infoconnect e as imagens abaixo amostram as cria├º├Áes das tabelas

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 25-Tabela fundamental do sistema, contendo email, senha e tipo de utilizador (Admin, T├®cnico ou Cliente).

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 26-Tabela com dados espec├¡ficos dos clientes, relacionada ├á tabela utilizadores atrav├®s de chave estrangeira.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 27-Tabela destinada aos t├®cnicos da empresa, contendo especialidade e liga├º├úo ├á tabela utilizadores.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 28-Tabela central do sistema, respons├ível por registar pedidos de assist├¬ncia, associando clientes, t├®cnicos, problemas descritos e estado atual.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 29-Tabela que cont├®m os or├ºamentos gerados para cada pedido, com valores, descri├º├úo e estado do or├ºamento.

Interface gráfica do usuário, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 30-Tabela utilizada para a comunica├º├úo entre cliente e t├®cnico dentro do sistema, associada aos pedidos.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 31-Tabela destinada às Perguntas Frequentes para apoio ao cliente.

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 32-Tabela utilizada para registar atividades importantes no sistema, como altera├º├Áes, acessos e a├º├Áes administrativas.

Uma imagem contendo Diagrama

O conte├║do gerado por IA pode estar incorreto.

Figura 33-Representa├º├úo gr├ífica das entidades principais da plataforma InfoConnect e as rela├º├Áes entre elas.

Com os serviços do XAMPP iniciados, foi acedida a interface do phpMyAdmin, mostrada na última imagem desta secção.

Aqui foi criada a base de dados infoconnect e foram executados os comandos SQL responsáveis pela criação das tabelas principais:

O phpMyAdmin permitiu, de forma simples e visual, gerir toda a estrutura da base de dados utilizada pelo sistema.

Descri├º├úo T├®cnica do Template

O template que foi utilizado no projeto InfoConnect foi gerado automaticamente atrav├®s do Google AI Studio, ├® uma plataforma de intelig├¬ncia artificial capaz de criar estruturas completas de aplica├º├Áes web a partir de instru├º├Áes em linguagem natural.

A ferramenta gerou:

Interface gráfica do usuário, Texto, Aplicativo

O conte├║do gerado por IA pode estar incorreto.

Figura 34-Landing Page do template

Arquitetura Geral do Projeto

O projeto segue uma arquitetura Full-Stack, composta por três camadas principais:

Front-End: desenvolvido em React, funcionando como uma Single Page Application (SPA), responsável por toda a interface visual e interação com o utilizador;

Back-End: implementado em Node.js com o framework Express, disponibilizando uma API REST que comunica com a base de dados;

Base de Dados: sistema relacional MySQL, onde s├úo guardadas todas as informa├º├Áes da plataforma (utilizadores, pedidos, or├ºamentos, mensagens, etc.).

Esta separação permite uma maior organização, escalabilidade e manutenção do sistema.

Tecnologias Utilizadas no Front-End

O template disponibiliza um ambiente completo baseado em tecnologias modernas:

React 19: biblioteca principal utilizada para construir a interface. Instalação (via Vite): npm create vite@latest. - template react-ts.

Vite: ferramenta de desenvolvimento rápida, responsável pelo arranque da aplicação e compilação. Instalação: Incluído no comando acima.

Tailwind CSS: framework de estilos utilitário, permitindo criar interfaces modernas de forma rápida e consistente. Instalação: npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p.

Lucide-React: conjunto de ícones utilizados nos componentes da interface. Instalação: npm install lucide-react.

Recharts: biblioteca usada para gerar os gráficos do dashboard do administrador. Instalação: npm install recharts.

TypeScript: utilizado parcialmente para melhorar a tipagem e reduzir erros de execução. Instalação: npm install -D typescript @types/react @types/react-dom.

Tecnologias Utilizadas no Back-End

A parte de servidor do template utiliza:

Node.js: ambiente de execução do JavaScript no lado do servidor. Instalação: Baixar e instalar do site oficial.

Express: framework responsável pela construção da API. Instalação: npm install express.

MySQL2: biblioteca que permite conectar o servidor ao SGBD MySQL. Instalação: npm install mysql2.

Multer: middleware utilizado para upload de ficheiros (ex.: anexos em pedidos de assistência). Instalação: npm install multer.

Nodemailer. ferramenta para envio de emails, aqui configurada inicialmente com contas de teste. Instalação: npm install nodemailer.

PDFKit: utilizada para gerar relatórios em formato PDF. Instalação: npm install pdfkit.

CORS: middleware que permite a comunicação entre portas diferentes, neste caso entre React (5173) e o servidor (3000). Instalação: npm install cors.

Prompt:

Cria um site minimalista e moderno para a plataforma InfoConnect, utilizando React + Vite + TailwindCSS. A estrutura deve incluir uma Landing Page simples e limpa InfoConnect, uma P├ígina de Login e uma P├ígina de Criar Conta com formul├írios responsivos, e um Painel principal (Dashboard) com cart├Áes de estat├¡sticas. Implementa tamb├®m uma Navbar e uma Sidebar minimalistas com ├¡cones da biblioteca lucide, e cria as p├íginas base: Home, Pedidos, Clientes, T├®cnicos e Configura├º├Áes. A plataforma tem como finalidade facilitar o atendimento e a comunica├º├úo entre empresas de inform├ítica e os seus clientes. Pretende-se tornar o processo de gest├úo de pedidos mais r├ípido, pr├ítico e automatizado, permitindo que os clientes registem pedidos de assist├¬ncia ou or├ºamentos, acompanhem o estado do servi├ºo em tempo real e comuniquem diretamente com a empresa. As empresas poder├úo gerir pedidos e clientes, enviar or├ºamentos, registar interven├º├Áes e consultar estat├¡sticas essenciais para melhorar o processo de atendimento.

Conclusão